<script setup lang="ts">
  import { computed } from 'vue'
  import { ArrUtil } from '@xtail/core'
  import { IconFontClassPropsType } from './types'

  defineOptions({
    name: 'SIconFontClass'
  })

  const props = withDefaults(defineProps<IconFontClassPropsType>(), {})

  const classes = computed(() => {
    return ArrUtil.isArr(props.className)
      ? [props.icon ?? '', ...props.className]
      : (props.icon ?? '') + ' ' + props.className
  })
</script>

<template>
  <span class="s-icon-font-class" :class="classes" :style="style" />
</template>

<style lang="scss">
  @use './style' as *;
</style>
